<template>
  <view class="pupop">
    <view class="popup-box" :animation="animationData">
      <view class="pupop-btn">
        <view @tap="cancel">取消</view>
        <view @tap="confirm" style="color: #2979ff">确定</view>
      </view>
      <picker-view
        :value="value"
        :indicator-style="indicatorStyle"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in provinceList"
            :key="index"
            :class="index == value[0] ? 'itemActive' : ''"
            >{{ item.fName }}</view
          >
        </picker-view-column>

        <picker-view-column>
          <view
            class="item"
            v-for="(item, index2) in cityList"
            :key="index2"
            :class="index2 == value[1] ? 'itemActive' : ''"
            >{{ item.fName }}</view
          >
        </picker-view-column>

        <picker-view-column>
          <view
            class="item"
            v-for="(item, index3) in areaList"
            :key="index3"
            :class="index3 == value[2] ? 'itemActive' : ''"
            >{{ item.fName }}</view
          >
        </picker-view-column>

        <picker-view-column>
          <view
            class="item"
            v-for="(item, index4) in streetList"
            :key="index4"
            :class="index4 == value[3] ? 'itemActive' : ''"
            >{{ item.fName }}</view
          >
        </picker-view-column>
      </picker-view>
    </view>
    <view
      @tap="close"
      @touchmove.stop.prevent
      :class="visible ? 'pupop-model' : 'pupop-models'"
    ></view>
  </view>
</template>

<script>
// 地址：https://ext.dcloud.net.cn/plugin?id=7065
import { getAction } from "@/utils/request.js";
export default {
  data() {
    return {
      value: [0, 0, 0, 0],
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      indicatorStyle: `height: 50px;`,
      provinceIndex: 0,
      cityIndex: 0,
      areaIndex: 0,
      streetIndex: 0,
      animationData: {},
      cityName: [],
    };
  },
  props: {
    addressList: {
      type: Array,
      default: () => [],
    },
    // 初始地区编码（例:420102）
    defaultValue: {
      type: String,
      default: () => "",
    },
    // 控制选择器显示和隐藏
    visible: {
      type: Boolean,
      default: () => false,
    },
    // 点击模态框是否关闭弹框
    maskCloseAble: {
      type: Boolean,
      default: () => true,
    },
  },
  watch: {
    visible(val) {
      this.changeActive();
    },
  },
  created() {
    this.initData();
    this.changeActive();
  },
  methods: {
    async initData() {
      this.provinceList = this.addressList;
      await this.getTargetList("cityList", this.addressList[0].fDzbm, 2);
      if (this.cityList.length) {
        await this.getTargetList("areaList", this.cityList[0].fDzbm, 3);
      }
      if (this.areaList.length) {
        await this.getTargetList("streetList", this.areaList[0].fDzbm, 4);
      }
    },

    async getTargetList(list, fDzbm, type) {
      let res = await getAction("/common/commons/subordinateList", {
        fDzbm,
        type,
      });
      this[list] = res.result || [];
    },

    // 动画
    changeActive() {
      var active = "-315px";
      if (this.visible) {
        active = 0;
      }
      var animation = uni.createAnimation({
        duration: 400,
        timingFunction: "linear",
      });
      animation.bottom(active).step();
      this.animationData = animation.export();
    },

    bindChange(e) {
      e.detail.value[0] = e.detail.value[0] || 0;
      e.detail.value[1] = e.detail.value[1] || 0;
      e.detail.value[2] = e.detail.value[2] || 0;
      e.detail.value[3] = e.detail.value[3] || 0;
      if (e.detail.value[0] != this.provinceIndex) {
        // console.log('监听第一列')
        this.provinceChange(e.detail.value[0]);
      } else if (e.detail.value[1] != this.cityIndex) {
        this.cityChange(e.detail.value[1]);
      } else if (e.detail.value[2] != this.areaIndex) {
        this.areaChange(e.detail.value[2]);
      } else if (e.detail.value[3] != this.streetIndex) {
        this.streetChange(e.detail.value[3]);
      }
    },
    // 监听第一列变化
    async provinceChange(e) {
      this.provinceIndex = e;
      this.cityIndex = 0;
      this.areaIndex = 0;
      this.streetIndex = 0;
      this.cityList = [];
      this.areaList = [];
      this.streetList = [];
      this.value = [...[e, 0, 0, 0]];
      await this.getTargetList("cityList", this.addressList[e].fDzbm, 2);
      if (this.cityList.length)
        await this.getTargetList("areaList", this.cityList[0].fDzbm, 3);
      if (this.areaList.length)
        await this.getTargetList("streetList", this.areaList[0].fDzbm, 4);
    },
    // 监听第二列变化
    async cityChange(e) {
      this.cityIndex = e;
      this.areaIndex = 0;
      this.areaList = [];
      this.streetList = [];
      this.value = [...[this.provinceIndex, e, 0, 0]];
      await this.getTargetList("areaList", this.cityList[e].fDzbm, 3);
      if (this.areaList.length)
        await this.getTargetList("streetList", this.areaList[0].fDzbm, 4);
    },
    // 监听第三列变化
    async areaChange(e) {
      this.areaIndex = e;
      this.streetList = [];
      this.value = [...[this.provinceIndex, this.cityIndex, e, 0]];
      await this.getTargetList("streetList", this.areaList[e].fDzbm, 4);
    },

    streetChange(e) {
      this.streetIndex = e;
      this.value = [...[this.provinceIndex, this.cityIndex, this.areaIndex, e]];
    },

    // 点击模态框
    close() {
      if (this.maskCloseAble) {
        this.cancel();
      }
    },

    cancel() {
      this.value = [0, 0, 0, 0];
      this.$emit("cancel");
    },

    confirm() {
      const { address, code } = this.getDataInfo(...this.value);

      this.$emit("confirm", { address, code });
    },

    getDataInfo(a, b, c, d) {
      const { provinceList, cityList, areaList, streetList } = this;
      if (!provinceList || !cityList || !areaList || !streetList) {
        console.error("One of the lists is undefined");
        return { address: "", code: {} };
      }

      const provinceName = provinceList[a] ? provinceList[a].fName : "";
      const cityName = cityList[b] ? cityList[b].fName : "";
      const areaName = areaList[c] ? areaList[c].fName : "";
      const streetName = streetList[d] ? streetList[d].fName : "";

      const address = provinceName + cityName + areaName + streetName;

      const fSsjzwDzbm = provinceList[a] ? provinceList[a].fDzbm : "";
      const fSsdyDzbm = cityList[b] ? cityList[b].fDzbm : "";
      const fSslcDzbm = areaList[c] ? areaList[c].fDzbm : "";
      const fSsjzwdyfwDzbm = streetList[d] ? streetList[d].fDzbm : "";

      const code = {
        fSsjzwDzbm,
        fSsdyDzbm,
        fSslcDzbm,
        fSsjzwdyfwDzbm,
      };

      return { address, code };
    },
  },
};
</script>

<style scoped lang="scss">
.pupop {
  .popup-box {
    position: fixed;
    left: 0;
    bottom: -315px;
    z-index: 99999;
    background: #fff;
    padding-bottom: 50px;
    .pupop-btn {
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 30upx;
      justify-content: space-between;
      font-size: 30rpx;
    }
  }
  .pupop-model {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
  }
  .pupop-models {
    display: none;
  }
  .picker-view {
    width: 750rpx;
    height: 225px;
    margin-top: 20rpx;
  }
  .item {
    height: 50px;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 50px;
    font-size: 32rpx;
  }

  .itemActive {
    align-items: center;
    justify-content: center;
    text-align: center;
    display: block;
    font-weight: 700;
  }
}
</style>
